<template>
  <div class="content" v-loading="submitBtn">
    <div class="scroll-view-box">
      <el-form label-width="120px" :inline="true" :model="formData" :rules="formRules" ref="elFrom"
        label-position="top">
        <el-form-item label="售后类型划分" prop="problem_type_idx">
          <el-select v-model="formData.problem_type_idx" placeholder="请选择售后类型划分" filterable clearable
            class="input-width">
            <el-option v-for="(item, idx) in salesType" :key="idx" :label="item.name" :value="idx">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="限期整改日期" prop="deadline_date">
          <el-date-picker v-model="formData.deadline_date" type="date" value-format="yyyy-MM-dd" placeholder="请选择限期整改日期"
            class="input-width" :picker-options="pickerOptionsEnd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="售后责任判定" prop="responsible_party_idx">
          <el-select filterable v-model="formData.responsible_party_idx" placeholder="请选择售后责任判定" clearable
            class="input-width">
            <el-option v-for="(item, idx) in responsibleParty" :key="idx" :label="item.name" :value="idx">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材料费" prop="material_cost">
          <el-input class="input-width" v-model="formData.material_cost" placeholder="请输入材料费" v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="人工费" prop="labor_cost">
          <el-input class="input-width" v-model="formData.labor_cost" placeholder="请输入人工费" v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="施工费" required>
          <el-input class="input-width" :value="compute" readonly placeholder="自动计算" v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="采购订单" prop="product_id" v-if="asInfo.is_order_goods == 1">
          <el-select filterable v-model="formData.product_id" placeholder="请选择采购订单" clearable class="input-width">
            <el-option v-for="item in purchase" :key="item.Id" :label="`${item.project_name}(${item.supplier_name})`"
              :value="item.Id">
              <span slot="empty">未找到该售后的采购订单</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" placeholder="请输入备注" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="维修费用清单">
          <div class="file-list-box">
            <div class="file-item-box" v-for="(item, index) in formData.cost_file" :key="index">
              <div class="el-icon-delete-box" @click="delFileFunc(index)">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <img class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>
            <el-upload multiple class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
              list-type="picture-card" :on-change="changeFile">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveSubmit" :loading="submitBtn">提交</el-button>
        <el-button @click="cancelFunc">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import configApi from '@/api/configApi'
import purchaseApi from "@/api/purchaseApi"
import afterSalesApi from '@/api/afterSalesApi'

export default {
  name: 'liabilityJudgment',
  data() {
    return {
      asInfo: {},
      salesType: [],
      responsibleParty: [],
      purchase: [],

      pickerOptionsEnd: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      loading: false,
      formData: {
        id: '',
        deadline_date: '',
        responsible_party_idx: '',
        problem_type_idx: '',
        product_id: '',
        material_cost: '',
        labor_cost: '',
        construction_cost: '',
        remark: '',
        cost_file: []
      },
      formRules: {
        deadline_date: { required: true, message: "请选择限期整改日期", trigger: "change" },
        responsible_party_idx: { required: true, message: "请选择售后责任判定", trigger: "change" },
        problem_type_idx: { required: true, message: "请选择售后类型划分", trigger: "change" },
        product_id: { required: true, message: "请选择采购订单", trigger: "change" },
        material_cost: { required: true, message: "请输入材料费", trigger: "change" },
        labor_cost: { required: true, message: "请输入人工费", trigger: "change" },
      },
      submitBtn: false,
    };
  },
  computed: {
    compute() {
      return this.getCountMoney();
    }
  },
  mounted() {
    let id = this.$route.query.sn
    if (id) {
      this.formData.id = id
      afterSalesApi.newAfterSalesDetails({ after_sales_id: id }).then(res => {
        console.log(res, '售后详情')
        if (res.code == 200) {
          this.asInfo = res.data;

          if (res.data.is_order_goods == 1) {
            // 获取采购订单列表
            purchaseApi.getPurchase({
              page: 1,
              num: 999,
              after_sales_id: this.formData.id,
            }).then(res => {
              console.log(res, "获取采购订单列表");
              if (res.code == 200) {
                this.purchase = res.data.list;
                this.formData.product_id = res.data.list[0].Id
              }
            })
          }
        }
      })
    }
    this.getList();
  },
  methods: {
    // 选择文件
    changeFile(file) {
      this.formData.cost_file.push(file)
    },
    delFileFunc(index) {
      this.formData.cost_file.splice(index, 1);
    },
    getCountMoney() {
      let formData = this.formData
      let price = ''
      if (formData.material_cost && formData.labor_cost) {
        let val1 = formData.material_cost ? Number(formData.material_cost) : 0;
        let val2 = formData.labor_cost ? Number(formData.labor_cost) : 0;
        price = Math.floor((val1 + val2) * 100) / 100;
      }
      return price
    },
    // 提交
    saveSubmit() {
      this.$refs['elFrom'].validate((valid) => {
        if (valid) {
          let formData = this.formData
          let data = {
            after_sales_id: formData.id,
            deadline_date: formData.deadline_date,
            responsible_party: this.responsibleParty[formData.responsible_party_idx].name,
            responsible_party_id: this.responsibleParty[formData.responsible_party_idx].id,
            problem_type: this.salesType[formData.problem_type_idx].name,
            problem_type_id: this.salesType[formData.problem_type_idx].id,
            material_cost: formData.material_cost,
            labor_cost: formData.labor_cost,
            remark: formData.remark,
            construction_cost: this.getCountMoney(),
          }
          if (this.asInfo.is_order_goods == 1) {
            data.product_id = formData.product_id;
          }

          let formdata = new FormData();
          formdata.append('data', JSON.stringify(data))
          formData.cost_file.forEach(item => {
            formdata.append('cost_file[]', item.raw);
          })
          this.submitBtn = true;
          afterSalesApi.responsibilityDetermination(formdata).then(res => {
            console.log(res, '提交成功')
            if (res.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
              this.cancelFunc()
            } else {
              this.$message.error(res.message);
            }
            this.submitBtn = false;
          })
        } else {
          return false;
        }
      });
    },
    // 取消
    cancelFunc() {
      this.$goBackTab(this);
    },


    // 获取列表数据
    getList() {
      // 获取售后类型划分
      configApi.getList({
        page: 1,
        num: 999,
      }, 3).then((res) => {
        console.log(res, "获取售后类型划分");
        if (res.code == 200) {
          this.salesType = res.data.list;
        }
      })
      // 获取责任判定列表
      configApi.getList({
        page: 1,
        num: 999,
      }, 2).then((res) => {
        console.log(res, "获取责任判定列表");
        if (res.code == 200) {
          this.responsibleParty = res.data.list;
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/addPage.scss";
</style>